{% extends "cmdb/index.html" %}
{% block title %}游戏列表{% endblock %}
{% block style %}
    <link type="text/css" rel="stylesheet" href="/static/css/ui.jqgrid.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/jquery-ui-1.7.1.custom.css" />

{% endblock %}
{% block breadcrumb  %}
    <ul class="breadcrumb">
                            <li>
                                <i class="ace-icon fa fa-home home-icon"></i>
                                <a href="#">Home</a>
                            </li>
                            <li>
                                <i class="ace-icon fa fa-home home-icon"></i>
                                <a href="#">游戏管理</a>
                            </li>
                            <li class="active">游戏列表</li>
                        </ul><!-- /.breadcrumb -->
{% endblock %}
{% block page-header %}
<div class="page-header">
    <h1>
        Dashboard
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
        游戏管理 &amp; 游戏列表
        </small>
        </h1>
</div><!-- /.page-header -->
{% endblock %}

{% block content %}
{% include "game/search_form.html"  %}
   <div id="mytable">
     <table class="table table-striped" id="gridtable" width="100%" border="0.5">
        <thead>
        <tr>
            <th><input type="checkbox" name="check" id="all"/> </th>
            <th>ID</th>
            <th>游戏名</th>
            <th>游戏用户名</th>
            <th>服务器IP</th>
            <th>版本</th>
            <th>状态</th>
            <th>类型</th>
            <th>game_id</th>
            <th>开服时间</th>
        </tr>
        </thead>
{#     get_state_display 显示choices 的选项#}
        {% for i in posts  %}
            <tr>
            <td><input   type="checkbox" name="check_box" value="{{ i.id }}" /> </td>
            <td class="active" >{{ i.id }}</td>
            <td class="success" >{{ i.name }}</td>
                <td class="active">{{ i.game_user }}</td>
              <td class="active" >{{ i.server }}</td>
            <td class="warning">{{ i.version }}</td>
                <td class="warning"> {{ i.get_state_display }}</td>

            <td class="active" >{{ i.get_game_type_display }}</td>
            <td class="active" >{{ i.game_id }}</td>
            <td class="active" >{{ i.open_date|date:"Y-m-d H:i:s" }}</td>


            </tr>
        {% endfor %}
    </table>
   </div>
    
     <div class="text-center">
    <label for="select">每页数据条数:</label>
    <select  id="mySelect">
        <option >0</option>
        <option selected="selected">10</option>
        <option>20</option>
        <option>30</option>
    </select>&nbsp;&nbsp;&nbsp;&nbsp;
    
    
    
    <div class="text-right">
    <ul class="pagination pagination-lg">
        <li class="disabled"><a href="#">&laquo;</a></li>
        {% for var in pagelist %}
            {% ifequal var curpage  %}
            <li class="active"><a href="{% url url_name  %}?curpage={{var}}&allpage={{allpage}}"> {{var}}</a></li>

            {% else %}
                <li><a href="{% url url_name %}?curpage={{var}}&allpage={{allpage}}">{{var}}</a></li>
                {% endifequal %}
        {% endfor %}
    <li ><a href="#">&raquo;</a></li>
    </ul>
    </div>
    </div>


    <!-- jqGrid 分页 div gridPager -->
<div id="gridPager">
    <input  class="btn btn-default" type="button" id="add" value="添加" />
    <input class="btn btn-warning" type="button" id="edit" value="编辑" />
    <input class="btn btn-danger" type="button" id="delete" value="删除" />
<input class="btn btn-danger" type="button" id="sync_game_list" value="同步服务器列表" />

</div>
    <!--jqGrid 浏览导航栏所在-->
<p style="display:none">默认隐藏</p>
<!-- 模态框（Modal） -->
<div class="modal fade" id="mymodal"  >
    <div class="modal-dialog" style="width:520px ;">
        <div class="modal-content">
            <p><button class="close" type="button" data-dismiss="modal">×</button></p>
                <hr />
                <p id="label_for_edit"  name="label_modal" class="text-center">aaaa</p>
                <!-- 模态弹出窗内容 -->
         <!-- <div class="modal-body">
            <textarea rows="2" cols="50">在这里输入回复</textarea>
          
         </div> -->

         <form id="myformid"  class="form-horizontal" method="POST" role="form"  onSubmit="return false;">
          <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
          <input type="hidden" name="id" value="">

          {% for field in form %}        
           <div class="form-group"></div>
           <label for={{ field.label }} class="col-sm-3 control-label">{{ field.label }}</label>
           <div class="col-sm-8">{{ field }} </div>
          {{ field.errors }}
          {% endfor %}
        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">

                            <button type="submit" class="btn btn-success" onclick="postform()">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button  id="btn2" type="button" class="btn btn-primary"   data-dismiss="modal">关闭</button>
                        </div>
                        </div>
        </form>  
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->

{% endblock %}

    {% block scripts %}
        <script  type="text/javascript" src="/static/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/static/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
        <script type="text/javascript" src="/static/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
       
    <script type="text/javascript">
    function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

        return unescape(arr[2]);
    else
        return null;
}

function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

    function postform(){
       var baseurl="{% url url_name %}?&r="+Math.random();
       option=getCookie('option');
       var url = baseurl+"&option="+option;
       delCookie('option');
       $.ajax({
                cache: false,
                type: "POST",
                url:url,
                data:$('#myformid').serialize(),// 你的formid
                async: false,
                dataType: "json",
                error: function(request) {
                    alert("Connection error");
                },
                success: function(data) {
                    alert(data.msg);
                    delCookie('pageper');

                    $("#mymodal").modal('hide');
                    var url="{% url url_name %}?&r="+Math.random();
                    window.location.href=url;
                 }
            }); 
    }

$(document).ready(function() {
    //window.onload=onload;
    $('input[name="game_id"]').change(function() {
        var game_id=$(this).val();
        var game_dbname='game_'+game_id;
        var log_dbname="log_"+game_id;
        var game_db_dbname='game_bg_'+game_id;
        $('input[name="game_dbname"]').attr("value",game_dbname);
        $('input[name="log_dbname"]').attr("value",log_dbname);
        $('input[name="game_db_dbname"]').attr("value",game_db_dbname);
        /* Act on the event */
    });


    $('#mySelect').change(function(){
        var per=$(this).children('option:selected').val();
        delCookie('pageper');
        setCookie('pageper',per);
        var url="{% url url_name %}?&r="+Math.random();
        window.location.href=url;
        });


    $("#add").click(function () {
        $('p[name="label_modal"]').html("添加服务器信息");
        $('input').attr("value","");
        $('input[name="csrfmiddlewaretoken"]').attr("value","{{csrf_token}}");
        $("#mymodal").modal('show');
        setCookie('option','add');
    });


  function onload(){
    
      var modal =getCookie("modal");
      var serverid=getCookie("server_id");
      if (modal =="yes"){
        $('p[name="label_modal"]').html("编辑服务器信息");
        $('input[name="id"]').attr("value",serverid);
        $("#mymodal").modal('show');
        delCookie("modal");
        delCookie("server_id");

      }
      
  }
  
  
  function edit_somethins(sid) {
        var url= "{% url url_name %}?option=query&r="+Math.random();
        $.ajax(
                {
                    type: "POST",
                    url:url,
                    data: {serverid:sid,csrfmiddlewaretoken:"{{csrf_token}}",option:"query"},
                    dataType: "json",
                    success: function(ret){
                        $('p[name="label_modal"]').html("编辑服务器信息");
                        $('input[name="id"]').attr("value",ret.id);
                        $('input[name="name"]').attr("value",ret.name);
                        $('input[name="version"]').attr("value",ret.version);


                        var open_time=ret.open_date.replace("T"," ");
                        console.log(open_time);
                        $('input[name="open_date"]').attr("value",ret.open_date.replace("T"," "));
                        $('input[name="game_id"]').attr("value",ret.game_id);
                        $('input[name="game_user"]').attr("value",ret.game_user);//password
{#                        $('input[name="db_password"]').attr("value",ret.db_password);//"db_user#}
{#                        $('input[name="db_user"]').attr("value",ret.db_user);//#}
{#                        $('input[name="mongo_passwd"]').attr("value",ret.mongo_passwd);#}
{#                        $('input[name="mongo_user"]').attr("value",ret.mongo_user);#}
{#                        $('input[name="game_dbname"]').attr("value",ret.game_dbname);#}
{#                        $('input[name="log_dbname"]').attr("value",ret.log_dbname);#}
{#                        $('input[name="game_db_dbname"]').attr("value",ret.game_db_dbname);#}
                        $("#id_server option[value="+ret.server+"]").attr("selected", true);
                        $("#id_platform option[value="+ret.platform+"]").attr("selected", true);
                        $("#id_mysql option[value="+ret.mysql+"]").attr("selected", true);
                        $("#id_mongo option[value="+ret.mongo+"]").attr("selected", true);
                        $("#id_status option[value="+ret.status+"]").attr("selected", true);
                        $("#id_game_type option[value="+ret.game_type+"]").attr("selected", true);
                        $("#id_phone_type option[value="+ret.phone_type+"]").attr("selected", true);//
                        $("#id_state option[value="+ret.state+"]").attr("selected", true); //
                        //document.getElementById("id_open_date").type="datetime";
                        $("#id_open_date").datetimepicker({
                            language: 'zh-CN',//显示中文
                            format: "yyyy-mm-dd hh:ii",
                            autoclose: true,
                            todayBtn: true,
                            startDate: "2001-01-01 00:00",
                            minuteStep: 10,
                            todayHighlight: true,
                            initialDate: open_time
                        });

                    },
                    error: function (msg) {
                        alert("Connection error");
                        return  false;
                    }
                }

        );
        setCookie('option','update');
        $("#mymodal").modal('show');
  }


    //编辑对应的js操作
    $("#edit").click(function () {
        var len = $("input:checkbox:checked").length;
        if (len>1){
            alert("一次只能编辑一个");
            return false;
        }
        else if  (len==0){
            alert("你还没有选中");
            return false;
        }
        var chk_value =[];
        $('input[name="check_box"]:checked').each(function(){
        chk_value.push($(this).val());
        });
        var server_id=chk_value[0];
        $('input').attr("value",""); //删除form表单的信息
        $('input[name="csrfmiddlewaretoken"]').attr("value","{{csrf_token}}"); //
        edit_somethins(server_id)
    });



    $("#delete").click(function () {
        var chk_value =[];
        $('input[name="check_box"]:checked').each(function(){
        chk_value.push($(this).val());
        });
        var server_id=chk_value.join('.');
        var len = $("input:checkbox:checked").length;
        if  (len<1){
            alert("你还没有选中");
            return false;
        }
        var result=confirm("是否删除id为:["+server_id+"]主机");
        if (! result){
            return false;
        }
        var url= "{% url url_name %}?option=del&r="+Math.random();
         $.ajax(
                {
                    type: "POST",
                    url:url,
                    data: {serverid:server_id,csrfmiddlewaretoken:"{{csrf_token}}",option:"delete"},
                    dataType: "json",
                     success: function(ret){
                        delCookie('pageper');
                          var url="{% url url_name %}?&r="+Math.random();
                          window.location.href=url;
                     },
                     error: function (msg) {
                          delCookie('pageper');
                          var url="{% url url_name %}?&r="+Math.random();
                          window.location.href=url;
                    }
                }
                  )
    });



    $("#all").click(function(){
        if(this.checked){
            $("[name=check_box]:checkbox").prop("checked", true);
        }else{
            $("[name=check_box]:checkbox").removeAttr("checked");
        }
     });

    
     $("#gridtable tr td").dblclick(function () {
        var sid=$(this).parent("tr").find("td").eq(1).html();
        edit_somethins(sid);
    });

     $("#sync_game_list").click(function () {
            var url= "{% url "game_mananger" %}?option=sync_game_list&r="+Math.random();
         $.ajax(
                {
                    type: "POST",
                    url:url,
                    data: {csrfmiddlewaretoken:"{{csrf_token}}"},
                    dataType: "json",
                     success: function(ret){
                        alert(ret.msg)
                        delCookie('pageper');
                          var url="{% url url_name %}?&r="+Math.random();
                          window.location.href=url;
                     },
                     error: function (msg) {
                          delCookie('pageper');
                          var url="{% url url_name %}?&r="+Math.random();
                          window.location.href=url;
                    }
                }
                  )
    });



{#    $("#update_game_db_pwd").click(function(){#}
{#       var func=func;#}
{#       var len = $("input:checkbox:checked").length;#}
{#       if  (len==0){#}
{#          alert("你还没有选中");#}
{#          return false;#}
{#       }#}
{#       var chk_value =[];#}
{#       $('input[name="check_box"]:checked').each(function(){#}
{#       chk_value.push($(this).val());#}
{#       });#}
{#        var func="update_game_db_pwd";#}
{#       var url= "{% url url_name %}?option="+func+"&r="+Math.random();#}
{#       for (var i=0;i<chk_value.length;i++){#}
{#           sid=chk_value[i];#}
{#           postdata={serverid:sid,csrfmiddlewaretoken:"{{csrf_token}}"};#}
{#            ajax_get(url,sid,0,10,postdata);#}
{#       }#}
{#    });#}

});
    </script>
        {% endblock %}
